<template>
  <div class="app">
    <div class="row">
      <div class="col-xs-3 col-md-3 col-lg-3 col-xl-3">
        <div class="app-container">
          <el-menu
            router
            :default-active="$route.path"
            class="el-menu-vertical"
            background-color="#304156"
            text-color="#bfcbd9"
            active-text-color="#409EFF"
            :collapse="isCollapse"
          >
            <el-menu-item index="/Daohang/chang_qi/ji_suanC">
              <i class="el-icon-menu"></i>
              <span>计算参数</span>
            </el-menu-item>
            <el-menu-item index="/Daohang/chang_qi/yong_huC">
              <i class="el-icon-menu"></i>
              <span>用户参数</span>
            </el-menu-item>
            <el-menu-item index="/Daohang/chang_qi/she_beiC">
              <i class="el-icon-menu"></i>
              <span>设备参数</span>
            </el-menu-item>
            <el-menu-item index="/Daohang/chang_qi/chu_nengC">
              <i class="el-icon-menu"></i>
              <span>储能参数</span>
            </el-menu-item>
            <el-menu-item index="/Daohang/chang_qi/cheng_benC">
              <i class="el-icon-menu"></i>
              <span>成本参数</span>
            </el-menu-item>
            <el-menu-item index="/Daohang/chang_qi/huan_jingC">
              <i class="el-icon-menu"></i>
              <span>环境参数</span>
            </el-menu-item>


          </el-menu>


  </div>
      </div>
      <div class="col-xs-6 col-md-6 col-lg-6 col-xl-6">
        <div class="panel-body fixed-content">
          <!-- 占位一个展示区 -->
          <router-view></router-view>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup name="app">

import { ref } from 'vue'

const isCollapse = ref(false)
// const route = useRoute()

</script>

<style>
.app{
  margin: 0;
  height: 100vh; /* 固定高度 */
  overflow: hidden; /* 隐藏滚动条 [[8]] */
}
.distribution-btn {
  background-color: #7aac3c;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s;
  height: 42px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
/* 统一导航项的样式 */

.list-group-item {
  display: block;
  text-align: center; /* 确保整体居中 */
  padding: 10px;
  border-bottom: 1px solid #ddd;
  transition: background-color 0.3s ease;
}

.list-group-item:hover {
  background-color: #f8f9fa;
}

.list-group-item.active {
  background-color: #64967e;
  color: #ffc268;
  font-weight: 900;
  text-shadow: 0 0 1px black;
  font-family: 微软雅黑;
}

/* 确保用户导航项的宽度与普通导航项一致 */
.user-dropdown .list-group-item {
  display: flex;
  justify-content: center; /* 文字部分居中 */
  align-items: center;
  width: 290px; /* 与普通导航项的宽度一致 */
}

/* 下拉菜单的文字部分 */
.text-center {
  margin-right: 10px; /* 为图标留出空间 */
}

/* 下拉菜单的图标部分 */
.arrow-down {
  margin-left: auto; /* 确保图标在右侧对齐 */
}

.app-container {
  display: flex;
  height: 100vh;
}
.title{
  align-items: center;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

.el-menu-vertical:not(.el-menu--collapse) {
  width: 220px;
  min-height: 100vh;
}

.main-container {
  flex: 1;
  padding: 6px;
  overflow: auto;
  background-color: #f1f5f9;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.fixed-content {
  height: calc(100vh - 100px); /* 减去顶部导航栏等的高度，可按需调整 */
  overflow-y: auto;
  position: sticky;
  top: 0;
}
</style>
